<template>
	<view>

		<!-- 创建活动 -->
		<u-popup :show="showCreate" mode="bottom" :round="18" @close="closeCreate" @open="openCreate">
			<!-- <view class="create-header">
				<u-icon name="close" size="24" @click="closeCreate"></u-icon>
			</view> -->
			<view style="height: 32rpx;"></view>
			<view class="create-options">
				<!-- <view class="create-opt-item" v-if="userInfo?.authenticationType === 2" data-type="2" @click="navigateToActivity"> -->
				<view class="create-opt-item" data-type="2" @click="navigateToActivity">
					<view class="create-opt-item-name">发俱乐部活动</view>
					<view class="create-opt-item-text">选择商家入驻，享受更低优惠狂欢吧！</view>
					<image class="create-opt-item-bg" src="https://static.wddzq.com/static/V3/huodong.png" />
					<view class="create-opt-bg"></view>
					<view class="create-tag">创建俱乐部可发</view>
				</view>
				<!-- 
				<view class="create-opt-item noActive" v-else data-type="2">
					<view class="create-opt-item-name">发俱乐部活动</view>
					<view class="create-opt-item-text">选择商家入驻，享受更低优惠狂欢吧！</view>
					<image class="create-opt-item-bg" src="https://static.wddzq.com/static/V3/huodong.png" />
					<view class="create-opt-bg"></view>
					<view class="create-tag">创建俱乐部可发</view>
				</view>
				  -->
				<view class="create-opt-item" style="margin-left: 16rpx;" @click="handleCommit">
					<view class="create-opt-item-name">发赛事</view>
					<view class="create-opt-item-text">发战队赛分组赛！</view>
					<image class="create-opt-item-bg" src="https://static.wddzq.com/static/V3/dongtai.png" />
					<view class="create-opt-bg"></view>
				</view>
			</view>
			<view class="create-item create-first" data-type="1" @click="navigateToActivity">
				<image src="https://static.wddzq.com/static/V3/huodong.png"></image>
				<view class="create-info">
					<view class="create-title">发活动</view>
					<view class="create-desc">与志同道合的朋友一起玩耍吧</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>

			<view class="footer-close">
				<image @click="closeCreate" src="https://static.wddzq.com/static/V3/guanbichouti.png" />
			</view>
			<!-- 认证俱乐部 -->
			<!-- <view v-if="userInfo?.authenticationType === 2" class="create-item create-second" data-type="2" @click="navigateToActivity">
				<image class="create-img" src="https://static.wddzq.com/static/fapaidui.png"></image>
				<view class="create-info">
					<view class="create-title">发派对</view>
					<view class="create-desc">点击开始派对狂欢吧！</view>
				</view>
				<u-icon name="arrow-right" color="#fff"></u-icon>
			</view> -->
			<!-- 未认证俱乐部 -->
			<!-- <view v-else class="create-item create-second noActive" data-type="2">
				<view class="create-tag">认证队长可发</view>
				<image class="create-img" src="https://static.wddzq.com/static/fapaidui.png"></image>
				<view class="create-info noActive">
					<view class="create-title">发派对</view>
					<view class="create-desc">点击开始派对狂欢吧！</view>
				</view>
				<u-icon name="arrow-right" color="#aaa"></u-icon>
			</view> -->
		</u-popup>

		<tui-cinfo-header :refresh="refresh"></tui-cinfo-header>

		<view style="height: 160rpx;background-color: transparent;"></view>
		<tui-tabbar :tabBar="tabBarList" :current="tabberCurrent" selectedColor="#1c1c1e" backgroundColor="#fff"
			backdropFilter="true" unlined="true" @click="handleTabbarClick"></tui-tabbar>
	</view>
</template>

<script>
	// import { getUserInfoDetail, isLogin } from '../../../config/utils.js';
	import {
		getUserInfoDetail,
		isLogin
	} from '../../../config/utils.js';

	export default {
		name: 'tuiCtabbar',
		data() {
			return {
				tabberCurrent: this.current,
				showCreate: false,
				userInfo: {},
				tabBarList: [{
					pagePath: '/pages/index/index',
					text: '活动',
					iconPath: 'https://static.wddzq.com/static/shouye-moren.png',
					selectedIconPath: 'https://static.wddzq.com/static/shouye-xuanzhong.png'
				}, {
					pagePath: '/pages/store/store',
					text: '商家',
					iconPath: 'https://static.wddzq.com/static/changdi.png',
					selectedIconPath: 'https://static.wddzq.com/static/change_selected.png'
				}, {
					pagePath: '',
					hump: true,
					iconPath: 'https://static.wddzq.com/static/Group277.png',
					selectedIconPath: 'https://static.wddzq.com/static/Group277.png',
				}, {
					pagePath: '/pages/community/community',
					text: '广场',
					iconPath: 'https://static.wddzq.com/static/V3/shequ-weixuanzhong.png',
					selectedIconPath: 'https://static.wddzq.com/static/V3/shequ-xuanzhong.png'
				}, {
					pagePath: '/pages/personauth/personauth',
					text: '我的',
					iconPath: 'https://static.wddzq.com/static/wode-moren.png',
					selectedIconPath: 'https://static.wddzq.com/static/wode-xuanzhong.png'
				}, ],
			}
		},
		props: {
			current: {
				type: Number,
				default: 0
			},
			refresh: {
				type: Number,
				default: 0
			}
		},
		watch: {
			// refresh() {
			// 	this.tabberCurrent = this.current;
			// 	this.showCreate = false;
			// }
		},
		methods: {
			closeCreate() {
				this.showCreate = false;
			},
			openCreate() {
				this.showCreate = true;
			},
			handleCommit() {
				uni.navigateTo({
					url: '/pages/commit/commit'
				})

				this.closeCreate();
			},
			navigateToActivity(e) {
				const {
					type
				} = e.currentTarget.dataset || {}
				uni.navigateTo({
					url: `/pages/publish/publish?type=${type}`
				})
				this.closeCreate();
			},
			handleTabbarClick(data) {
				if (data.index === 2) {
					// console.log(isLogin(), 'isLOgin')
					// if(!isLogin()) {
					// 	uni.navigateTo({
					// 		url: "/pages/login/login"
					// 	})
					// 	return;
					// }
					// let userInfo = getUserInfoDetail();
					// if(userInfo) {
					// 	this.userInfo = userInfo;
					// }
					// this.tabberCurrent = data.index;
					this.showCreate = true;
				} else {
					// 会员和我的需要登录
					if (data.index === 3 || data.index === 4) {
						// if(!isLogin()) {
						// 	uni.navigateTo({
						// 		url: "/pages/login/login"
						// 	})
						// 	return;
						// }
					}
					// this.tabberCurrent = data.index;
					uni.switchTab({
						url: this.tabBarList[data.index].pagePath
					})
				}
			},
		}
	}
</script>

<style>
	/* 创建活动 */
	.create-header {
		display: flex;
		justify-content: flex-end;
		padding: 18rpx;
		margin-bottom: 50rpx;
	}

	.create-item.create-first {
		background-color: #FFB803;
		margin-bottom: 44rpx;
	}

	.create-item {
		display: flex;
		height: 156rpx;
		align-items: center;
		padding-left: 14rpx;
		padding-right: 36rpx;
		border-radius: 18rpx;
		background-color: #0074FC;
		margin: 0 24rpx;
		margin-bottom: 80rpx;
		position: relative;
	}

	.noActive .create-tag {
		background-color: #ddd;
	}

	.create-tag {
		position: absolute;
		right: 0;
		top: 0;
		padding: 8rpx 16rpx;
		background-color: #FFB803;
		font-size: 24rpx;
		border-bottom-left-radius: 18rpx;
		/* border-top-right-radius: 18rpx; */
		height: 30rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30rpx;
	}

	.create-item.noActive {
		background-color: #f2f2f2;
	}

	.create-item image {
		width: 198rpx;
		height: 240rpx;
		margin-right: 28rpx;
		margin-bottom: 70rpx;
	}

	.create-item image.create-img {
		width: 145rpx;
		height: 161rpx;
		margin-left: 26rpx;
		margin-right: 50rpx;
		margin-bottom: 40rpx;
	}

	.create-item .create-info {
		flex: 1;
	}

	.create-info .create-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 12rpx;
	}

	.create-info.noActive .create-title,
	.create-info.noActive .create-desc {
		color: #AAAAAA;
	}

	.create-info .create-desc {
		font-size: 24rpx;
		color: #333;
	}

	.create-second .create-title,
	.create-second .create-desc {
		color: #fff;
	}

	.create-options {
		display: flex;
		padding: 0 24rpx;
		margin-bottom: 105rpx;
	}

	.create-opt-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		height: 180rpx;
		background: #1C1C1C;
		border-radius: 18rpx;
		position: relative;
		overflow: hidden;
	}

	.create-opt-item .create-opt-bg {
		width: 250rpx;
		height: 250rpx;
		border-radius: 125rpx;
		background: #FFFFFF;
		opacity: 0.1;
		position: absolute;
		top: 100rpx;
		left: -50rpx;
	}

	.create-opt-item .create-opt-item-name {
		height: 50rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50rpx;
		padding-left: 24rpx;
	}

	.create-opt-item .create-opt-item-text {
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
		margin-top: 8rpx;
		padding-left: 24rpx;
		z-index: 3;
	}

	.create-opt-item image.create-opt-item-bg {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 120rpx;
		height: 110rpx;
	}

	.footer-close {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.footer-close image {
		width: 117rpx;
		height: 117rpx;
	}
</style>